<template>
  <!-- 按钮 -->
  <div style="margin: 10px 0">
    <el-button type="primary" @click="add()">新增</el-button>
    <el-button type="primary"  @click="add()">导入</el-button>
    <el-button type="primary"  @click="add()">导出</el-button>
  </div>

  <!-- 模糊查询 -->
  <div style="margin: 10px 0">
    <el-input v-model="searchText" placeholder="请输入关键字" style="width: 20%"></el-input>
    <el-button type="primary" style="margin-left: 5px" @click="search()">查询</el-button>
  </div>

  <!-- 表格部分 -->
  <div>
    <el-table :data="state.tableData" border stripe style="width: 100%">
      <el-table-column  prop="id" label="id" width="150" />
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="password" label="密码" width="120" />
      <el-table-column prop="nickName" label="昵称" width="120" />
      <el-table-column prop="age" label="年龄" width="120" />
      <el-table-column prop="sex" label="性别" width="120" />
      <el-table-column prop="address" label="地址" width="120" />
      <el-table-column  label="操作" width="200">
        <template #default="scope">
          <el-button type="primary" size="small" @click="edit(scope.$index, scope.row)">
            <el-icon style="margin-right: 3px"><Edit/></el-icon>
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="remove(scope.$index, scope.row)">
            <el-icon style="margin-right: 3px"><Delete/></el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 添加/编辑 模态框 -->
  <el-dialog  v-model="addDialogForm" title="Shipping address">
    <el-form :model="state.form" ref="ruleFormRef" :rules="state.rules">
      <el-form-item label="用户名" :label-width="140" prop="username">
        <el-input v-model="state.form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="140" prop="password">
        <el-input v-model="state.form.password" show-password autocomplete="off" />
      </el-form-item>
      <el-form-item label="昵称" :label-width="140" prop="nickName">
        <el-input v-model="state.form.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="年龄" :label-width="140" prop="age">
        <el-input-number v-model="state.form.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="140" prop="sex">
        <el-radio-group v-model="state.form.sex" class="ml-4">
          <el-radio label="男" size="large">男</el-radio>
          <el-radio label="女" size="large">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="地址" :label-width="140" prop="address">
        <el-input v-model="state.form.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialogForm = false">取消</el-button>
        <el-button type="primary" @click="save(ruleFormRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>

<!-- 分页条 -->
  <el-pagination
      v-model:currentPage="curPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 15, 20, 30]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import {Edit} from "@element-plus/icons-vue";
import {onBeforeMount, reactive, ref} from "vue";
import request from "../../utils/request.js";
import {ElMessage, ElNotification, FormInstance, FormRules} from "element-plus";

let searchText = ref('');
let curPage = ref(1);
let pageSize = ref(10);
let pageTotal = ref(1);

const addDialogForm = ref(false);
const ruleFormRef = ref<FormInstance>()

const state = reactive({
  tableData: [],
  form: {},
  rules: reactive<FormRules>({
    username: [
      {required: true, message: '请输入用户名', trigger: 'change'},
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'change' },
    ],
  })
})

const search = () =>{
  request.get("/user/list",{
    params:{
      pageNum: curPage.value,
      pageSize: pageSize.value,
      search: searchText.value
    }
  }).then((res:any) => {
    if(res.code == '0' || res.code == 0){
      state.tableData = res.data.records;
      curPage.value = res.data.current;
      pageSize.value = res.data.size
      pageTotal.value = res.data.total
    }else{
      ElMessage.error(res.msg)
    }
  })
}

const edit = (index: number, row: any) =>{
  state.form = JSON.parse(JSON.stringify(row))
  addDialogForm.value = true;
}

const remove = (index: number, row: any) =>{
  request.get("/user/delete?id=" + row.id).then((res:any) => {
    if(res.code == '0' || res.code == 0){
      ElMessage.success({
        type: 'success',
        message: "删除成功"
      })
      addDialogForm.value = false;
      search();
    }else{
      ElMessage.error("删除失败")
    }
  })
}

const add = () => {
  state.form = {};
  addDialogForm.value = true;
}

const save = async (el: FormInstance | undefined) => {
  if (!el) return
  await el.validate((valid, fields) => {
    if (valid){
      if(state.form.id){
        request.post("/user/edit",state.form).then((res:any) => {
          if(res.code == '0' || res.code == 0){
            ElMessage.success({
              type: 'success',
              message: "修改成功"
            })

          }else{
            ElMessage.error("修改失败")
          }
        })
      }else{
        request.post("/user/add",state.form).then((res:any) => {
          if(res.code == '0' || res.code == 0){
            ElMessage.success({
              type: 'success',
              message: "添加成功"
            })
          }else{
            ElMessage.error("添加失败")
          }
        })
      }
      addDialogForm.value = false;
      search();
    }else {
      ElNotification({
        title: 'error',
        message: '用户名或密码校验失败',
        type: 'error',
      })
    }
  })
}

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  search();
}
const handleCurrentChange = (val: number) => {
  curPage.value = val;
  search();
}

onBeforeMount(() => {
  // 先进行查询
  search();
})

</script>

<style scoped>

</style>
